<template>
	<view>
		<template v-if="(cinfo.notLower && cinfo.notLower.length)">
			<!-- 有子项 -->
			<view class="auth_vals FlexBetween " :class="[cinfo.isopen ? 'isActive' : '', auth_class]">
				<view class="check_area FlexAlign" @click="TogCheck">
					<checkcontent :info="info" :allchecked="allchecked" :isindeter="isindeter"></checkcontent>
					<text>
						{{cinfo.name || ''}}
					</text>
				</view>
				<view class="auth_more FlexItem FlexAlign" @click="Togopen">
					<view class="micon">
						<!-- <i class="iconfont icon-xiangxia"></i> -->
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<!-- 无子项 -->
			<view class="auth_vals FlexBetween " :class="auth_class">
				<view class="check_area FlexAlign" @click="TogCheck">
					<checkcontent :info="info" :allchecked="allchecked"></checkcontent>
					<text>
						{{cinfo.name || ''}}
					</text>
				</view>
			</view>
		</template>

	</view>
</template>

<script>
	import checkcontent from './checkcontent.vue'
	export default {
		components:{checkcontent},
		name: 'roleitem',
		data(){
			return {
				info: {},
				allchecked: false,
				isindeter: false
			}
		},
		props: {
			cinfo: {
				type: Object,
				default: () => {}
			},
			lvnum: {
				type: Number,
				default: 1,
			},
		},
		watch: { 
			cinfo: {
				handler(newVal, oldVal) {
					this.info = newVal;
					this.allchecked = newVal.checked;
					this.isindeter = newVal.isindeter;
					//console.log('cinfo', newVal, oldVal)
				},
				deep: true 
			},
		},
		methods: {
			TogCheck() {
				console.log('TogCheck', this.cinfo)
				this.$emit('TogCheck', this.cinfo)
				this.$forceUpdate();
			},
			Togopen() {
				this.$emit('Togopen')
			},
		},
		computed:{
			auth_class(){
				return `auth_lv${this.lvnum}`
			},
		},
	}
</script>

<style lang="scss" scoped>

	.FlexBetween{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.FlexAlign{
		display: flex;
		align-items: center;
	}
	.FlexItem{
		flex: 1;
	}
	
	.auth_more {
		height: 100%;
		justify-content: flex-end;
	}
	.check_area {
		text {
			padding-left: 6rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(104, 104, 104, 1);
			text-align: left;
			vertical-align: top;
			max-width: 300rpx;
		}
	}
	.micon {
		transition: all .3s;
		width: 16rpx;
		height: 16rpx;
		transform: rotate(45deg);
		border: solid 1px #b0b0b0;
		border-top: none ;
		border-left: none;
	}
	.auth_vals {
		padding: 15rpx 0;
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}
	.auth_vals.isActive {
		.micon {
			transform: rotate(225deg);
		}
	}
	.auth_lv1 {
		width: 100%;
		min-height: 100rpx;
		border-radius: 10rpx;
		background: rgba(248, 248, 250, 1);
		padding: 0 32rpx;
	}
	.auth_lv1.isActive {
		background: #fff7ec;
		border-radius: 10rpx 10rpx 0 0;
		border: solid 1px rgba(204, 204, 204, 1);
		border-bottom: 0;
	}
	.auth_lv2 {
		padding-left: 56rpx;
		min-height: 100rpx;
		border-bottom: solid 1px rgba(241, 241, 241, 1);
	}
	.auth_lv3 {
		min-height: 100rpx;
		padding-left: 112rpx;
		border-bottom: solid 1px rgba(241, 241, 241, 1);
	}
	.auth_lv4 {
		min-height: 100rpx;
		padding-left: 168rpx;
		border-bottom: solid 1px rgba(241, 241, 241, 1);
	}
	.auth_lv5 {
		min-height: 100rpx;
		padding-left: 224rpx;
		border-bottom: solid 1px rgba(241, 241, 241, 1);
	}
</style>